<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance, TableColumnData } from '@arco-design/web-vue'
import useTable from '@/hooks/useTable'
import useProduct from '@/hooks/useProduct'
interface detailItem {
  skuId: string
  spec: string
  price: number
  stock: number
  specStr: string
  salesVolume: any
}
const props = defineProps<{
  show: boolean
  goodsId: number
  publicId: any
  id: any
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const formRef = ref() as Ref<FormInstance>
const detail = reactive({
  type: 1,
  limitNum: 0,
  detailList: [] as detailItem[],
})
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = {
        id: props.id || '',
        goodsIds: props.goodsId,
        publicityId: props.publicId,
        config: JSON.stringify(detail),
      }
      const url = props.id ? '/server-shop/sys-seller/publicity/goods/update' : '/server-shop/sys-seller/publicity/goods/save'
      post(
        { url, data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          if (code == 200) {
            emit('update:show', false)
            emit('confirm')
          }
          done(code == 200)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const { getInfo: getGoodsInfo, info } = useProduct()
const getInfo = () => {
  detail.detailList = []
  getGoodsInfo(props.goodsId, () => {
    info.value.goodsSkuList.forEach(sku => {
      const obj = sku.spec ? JSON.parse(sku.spec) : {}
      const values = Object.values(obj)
      detail.detailList.push({
        skuId: sku.id,
        spec: sku.spec,
        specStr: values.join('+') || '默认',
        price: 0,
        stock: 0,
        salesVolume: 0,
      })
    })
  })
}
onMounted(() => {
  if (props.id) {
    get({ url: '/server-shop/sys-seller/publicity/goods/info', data: { id: props.id } }, ({ data }) => {
      Object.assign(detail, JSON.parse(data.config))
    })
  } else {
    getInfo()
  }
})
const { formatColumns } = useTable()
const columns = formatColumns([
  {
    title: '规格',
    dataIndex: 'specStr',
    width: 150,
  },
  {
    title: '活动价',
    dataIndex: 'price',
    width: 150,
  },
  {
    title: '库存',
    width: 150,
    dataIndex: 'stock',
  },
  {
    title: '销量',
    dataIndex: 'salesVolume',
    width: 150,
  },
]) as TableColumnData[]
</script>
<template>
  <CDrawer v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="800px" title="限时秒杀商品配置" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 4 }" :wrapper-col-props="{ span: 20 }">
        <a-form-item label="限购数量" field="limitNum" :rules="[{ required: true, message: '请输入限购数量' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.limitNum" placeholder="请输入限购数量" />
        </a-form-item>
        <a-form-item label="规格设置">
          <a-space direction="vertical">
            <a-table :columns="columns" :data="detail.detailList" :pagination="false" :bordered="{ cell: true }">
              <template #price="{ record }">
                <a-input-number :min="0" placeholder="请输入价格" v-model="record.price" />
              </template>
              <template #stock="{ record }">
                <a-input-number :min="0" placeholder="请输入库存" v-model="record.stock" />
              </template>
              <template #salesVolume="{ record }">{{ record.salesVolume || 0 }}</template>
            </a-table>
            <a-button type="primary" long @click="getInfo">刷新规格</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
  </CDrawer>
</template>
<style lang="less" scoped></style>
